/**
 * Created by GYL on 2018/7/25
 */
import React, { Component } from 'react';
import { Select, Row, Col, Tabs, Card, InputNumber, Popover, Tag, Checkbox, Collapse, Table, Button, DatePicker } from 'antd';
import Container from '../../components/common/Container';
import MyTable from '../../components/common/MyTable';
import PublicService from '../../services/PublicService';
import request from '../../utils/request';

import moment from 'moment';
import style from './WordCheck.less';
const Panel = Collapse.Panel;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
const Option = Select.Option;
class WordCheck extends Component {

    constructor(props) {
        super(props)
        this.columns = [
            {
                title: '序号',
                dataIndex: 'num',
                width: '5%',
                align: "center",
                key: "1"
            },
            {
                title: '外勤任务',
                dataIndex: 'taskName',
                width: '10%',
                align: "center",
                key: "2",
                render: (text,record) => <span>{text}<span style={{ width: 5, height: 20, backgroundColor:record.finished == 0?"#f50":"#87d068", position: "absolute", left: 0 }}></span></span>

            },
            {
                title: '任务类型',
                dataIndex: 'taskType',
                width: '10%',
                key: "3",
                align: "center",
                render: (text, record) => {
                    return <span>{text == 1?"安全检查":"安全考核"}</span>

                }
            },
            {
                title: '分配人员',
                dataIndex: 'baseUserName',
                width: '10%',
                key: "31",
                align: "center",
            },
            {
                title: '分配时间',
                dataIndex: 'takeTime',
                width: '10%',
                key: "32",
                align: "center",
            },
            {
                title: '完成状态',
                dataIndex: 'finishType',
                width: '10%',
                key: "33",
                align: "center",
            },
            {
                title: '实际完成时间',
                dataIndex: 'finishTime',
                width: '10%',
                key: "34",
                align: "center",
            },
            {
                title: '完成类型',
                dataIndex: 'finishType',
                width: '10%',
                key: "4",
                align: "center",

            },
            {
                title: '操作',
                width: '10%',
                dataIndex: 'number145',
                align: "center",
                key: "5",
                render: (text, record) => {
                    return <Tag color="#108ee9" onClick={this.onCheck.bind(this, record)}>详情</Tag>

                }
            }


        ];

    }


    state = {
        loading: false,
        selectedRowKeys: [],
        selectedRows: [],
        dataSource: [],
        pageIndex: 1,
        pageSize: 10,
        idList: [],
        name:""
    }

    componentDidMount() {
        request({
            url: `/zhrq-web/patrol/patroltask/getPageList`,
            method: 'POST',
            data: {patrolPersonnelId:PublicService.getCookie('patrolPersonnelId'),takeTime:PublicService.getCookie('WorkAlltakeTime')}
        }).then(data => {
            if(data.rc == 0) {
                console.log(data)
                data.ret.items.forEach((item) => {
                    item.takeTime = moment(item.takeTime).format("YYYY-MM-DD")
                })
                this.setState({
                    dataSource:data.ret.items,
                    name:data.ret.items[0].patrolPersonnelName
                })
            }
        })

    }




    // }
    //详情
    onCheck = (record) => {
        console.log(record)
        PublicService.setCookie('WordDetailsId',record.id)
        this.props.history.push("/WordDetails")
    }

    //下拉选择


    onA = () => {
        this.props.history.goBack()
    }



    render() {
        const { loading, selectedRowKeys, dataSource, pageIndex, pageSize, name, number116, number145, number500 } = this.state
        const windowWidth = document.body.clientWidth;
        const columns = this.columns
        const height = document.body.clientHeight;
        let containerHeight = '77vh';
        if (windowWidth > 1367) {
            containerHeight = '77vh';
        }

        return (
            <div>
                <Card className={style.Top_box}
                    bodyStyle={{ padding: "6px 24px" }}
                >
                    <Row>
                        <Col span={12}><a onClick={this.onA}>外勤任务管理</a> >> 查看任务</Col>
                        <Col span={12}><a onClick={this.onA} style={{ float: "right" }}>返回</a></Col>
                    </Row>
                    <br />
                    <p>
                        外勤人员: {this.state.name}      
                    </p>
                </Card>

                <Container
                    style={{ height: containerHeight, position: "relative", marginTop: "1vh", padding: "0px 10px" }}
                    header={true}
                >
                    <p>
                        完成状态选取: <Tag color="#108ee9">全部</Tag>
                        <Tag color="#f50">未完成</Tag>
                        <Tag color="#87d068">已完成</Tag>
                    </p>

                    <MyTable
                        // bordered
                        loading={loading}
                        columns={columns}
                        // rowSelection={rowSelection}
                        pagination={false}
                        // scroll={{ y: windowWidth < 1400 ? height - 280 : height - 300 }}
                        dataSource={PublicService.transformArrayData(dataSource, true, true, pageIndex, pageSize)}
                    />
                    <Button type="primary" onClick={this.save} className={style.Btn_bc}>确认</Button>
                </Container>
            </div>
        )
    }
}
export default (WordCheck);
